/**
* @desc:  人员管理-新增、编辑、查看
* @author qiankui
* @date 2023-4-20 14:23:58
*/
<template>
  <el-dialog :close-on-click-modal="false" :visible="editOrAddFlag" class="" width="1100px" :title="title"
             :before-close="handleCloseDialog">
    <div class="el-dialog-div">
      <el-form :disabled="this.handleEditOrAddType=='view'" :model="form" class="pop-form-box"
               :rules="rules" ref="ruleForm">
        <el-tabs v-model="activeName" @tab-click="handelTabsClick" v-if="biodataInfos">
          <!--基本信息-->
          <el-tab-pane :label="$t('Basic information')" name="0">
            <el-row :gutter="20">
              <el-col :span="12" style="border-right: 1px solid #eaecf0;height: 50vh;overflow-y: scroll">
                <!--姓名-->
                <el-form-item :label="$t('name')" prop="name">
                  <el-input v-model="form.name" :title="form.name" :minlength="$rules.name.min"
                            :maxlength="$rules.name.max"
                            @input="nameInput"
                            show-word-limit></el-input>
                </el-form-item>
                <!--手机号-->
                <el-form-item :label="$t('Mobile phone number')" prop="telephone">
                  <el-input v-model="form.telephone"></el-input>
                </el-form-item>
                <!--编号(工号)-->
                <el-form-item :label="$t('Number (job number)')" prop="jobNumber">
                  <el-input v-model="form.jobNumber"></el-input>
                </el-form-item>
                <!--证件号码-->
                <el-form-item :label="$t('Document number')" prop="idCard">
                  <el-input @input="idCardInput" autocomplete="new-password" v-model="form.idCard"></el-input>
                </el-form-item>
                <!--通行密码-->
                <el-form-item :label="$t('Access code')">
                  <el-input type="password" v-model="form.password" autocomplete="new-password"
                            show-password></el-input>
                </el-form-item>
                <!--性别-->
                <el-form-item :label="$t('Gender')" prop="sex">
                  <el-select @change="sexChange" v-model="form.sex" :placeholder="$t('Please select gender')">
                    <el-option :label="$t(item.label)" :value="item.value"
                               v-for="(item,index) in sexList"
                               :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <!--组织-->
                <el-form-item :label="$t('organization')" prop="zzid">
                  <el-cascader
                      v-model="form.zzid"
                      :props="defaultProps"
                      :options="orgInfo"
                      :show-all-levels="false"
                  >
                    <template slot-scope="{ node, data }">
                      <span>{{ data.name }}</span>
                      <span v-if="data.departmentInfos!==undefined"> ({{ data.departmentInfos.length }}) </span>
                    </template>
                  </el-cascader>
                </el-form-item>
                <!--考勤组-->
                <el-form-item  :label="$t('Attendance group')" prop="attendanceGroupId">
                  <el-select v-model="form.attendanceGroupId" :placeholder="$t('Please select')">

                    <el-option-group
                        v-for="group in grouplist"
                        :key="group.label"
                        :label="group.label">
                      <el-option
                          v-for="item in group.options"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        <span style="float: left">{{ item.name }}</span>
                      </el-option>
                    </el-option-group>

                  </el-select>
                </el-form-item>
                <!--新版卡号读卡-->
                <el-form-item class="nfcView" label="" prop="kh">
                     <span slot="label" style="display:inline-block;">
<!--                    是否加密-->
                    {{ this.i18n.t('Card number') }}
                       <!--                    选择加密后，生成二维码时，系统将根据加密后的字符串生成新的二维码-->
                      <el-tooltip effect="dark" placement="right">
                        <div slot="content">
                          {{ this.i18n.t('If the card is on the card reader, the reading card prompts that there is no card in the operation area, it may be that the card is encrypted, and the encrypted card reading is not supported.') }}<br>
                          {{ this.i18n.t('Encrypted card reading is currently not supported') }}
                        </div>
                        <i class='el-icon-question'/>
                      </el-tooltip>
                  </span>

                  <el-input :title="form.nfcCode" style="width: 90% !important;" placeholder="" disabled
                            v-model="form.nfcCode" class="input-with-select">
                    <el-button :title="$t('Read card')" @click="readnfc" :loading="readnfcLoading"
                               style="" slot="append" icon="iconfont-KUI icon-duka1"></el-button>
                  </el-input>
<!--                  <i style="margin-left: 10px"-->
<!--                     :title="$t('If the card is on the card reader, the reading card prompts that there is no card in the operation area, it may be that the card is encrypted, and the encrypted card reading is not supported.')+'\n'+$t('Encrypted card reading is currently not supported')"-->
<!--                     class="el-icon-question"></i>-->
                </el-form-item>

              </el-col>
              <el-col :span="12" style="position: relative">
                <div class="picView" v-if="biodataInfos.face.length">
                  <el-image
                      class="elImage"
                      :src="biodataInfos.face[0].showBase64Pic"
                      fit="contain">
                  </el-image>
                  <div class="picTool">
                    <div class="picToolView">
                      <i class="el-icon-zoom-in toolIcon" @click="picPreview(0,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="icon iconfont-KUI icon-caijian toolIcon picClipper"
                         @click="picClipperFn(0,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                         @click="removePic(0,0)"></i>
                    </div>
                  </div>
                </div>

                <div v-if="!biodataInfos.face.length"
                     class="selectFileView">
                  <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                  <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                              <!--添加人脸图像-->
                                            {{ this.i18n.t('Add facial image') }}
                                              <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-folder-opened"
                                        :command="beforeHandleCommand(0,0,0)">
                        <!--本地选择-->
                        {{ this.i18n.t('Local selection') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="el-icon-camera"
                                        :command="beforeHandleCommand(1,0,0)">
                        <!--终端扫描-->
                        {{ this.i18n.t('Terminal scan') }}
                      </el-dropdown-item>

                      <el-dropdown-item icon="iconfont iconfont-KUI icon-yuanchengkongzhi"
                                        :command="beforeHandleCommand(2,0,0)">
                        <!--远程采集-->
                        {{ this.i18n.t('Remote collection') }}
                      </el-dropdown-item>

                      <!--                                          <el-dropdown-item icon="icon iconfont-KUI icon-yuanchengkongzhi"-->
                      <!--                                                            :command="beforeHandleCommand(2,0,0)">-->
                      <!--                                            &lt;!&ndash;远程采集&ndash;&gt;-->
                      <!--                                            {{this.i18n.t('Remote collection')}}-->
                      <!--                                          </el-dropdown-item>-->
                      <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!--录入虹膜-->
          <el-tab-pane :label="$t('Input iris')" name="1" style="position: relative">

            <el-row :gutter="20">
              <el-col :span="12">
                <!--左眼-->
                <p>{{ this.i18n.t('left eye') }}</p><br>
                <div class="picView" v-if="biodataInfos.eye_left.length">
                  <el-image
                      class="elImage"
                      :src="biodataInfos.eye_left[0].showBase64Pic"
                      fit="contain">
                  </el-image>
                  <div class="picTool">
                    <div class="picToolView">
                      <i class="el-icon-zoom-in toolIcon" @click="picPreview(1,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="icon iconfont-KUI icon-caijian toolIcon picClipper"
                         @click="picClipperFn(1,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                         @click="removePic(1,0)"></i>
                    </div>
                  </div>
                </div>

                <div
                    v-if="!biodataInfos.eye_left.length"
                    class="selectFileView">
                  <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                  <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                              <!--添加左眼图像-->
                                              {{ this.i18n.t('Add Left Eye Image') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-folder-opened"
                                        :command="beforeHandleCommand(0,1,0)">
                        <!--本地选择-->
                        {{ this.i18n.t('Local selection') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="el-icon-camera" :command="beforeHandleCommand(1,1,0)">
                        <!--终端扫描-->
                        {{ this.i18n.t('Terminal scan') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="icon iconfont-KUI icon-yuanchengkongzhi"
                                        :command="beforeHandleCommand(2,1,0)">
                        <!--远程采集-->
                        {{ this.i18n.t('Remote collection') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>

              <el-col :span="12">
                <!--右眼-->
                <p>{{ this.i18n.t('right eye') }}</p><br>
                <div class="picView" v-if="biodataInfos.eye_right.length">
                  <el-image
                      class="elImage"
                      :src="biodataInfos.eye_right[0].showBase64Pic"
                      fit="contain">
                  </el-image>
                  <div class="picTool">
                    <div class="picToolView">
                      <i class="el-icon-zoom-in toolIcon" @click="picPreview(1,1)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="icon iconfont-KUI icon-caijian toolIcon picClipper"
                         @click="picClipperFn(1,1)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                         @click="removePic(1,1)"></i>
                    </div>
                  </div>
                </div>

                <div
                    v-if="!biodataInfos.eye_right.length"
                    class="selectFileView">
                  <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                  <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                              <!--添加右眼图像-->
                                              {{ this.i18n.t('Add Right Eye Image') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-folder-opened"
                                        :command="beforeHandleCommand(0,1,1)">
                        <!--本地选择-->
                        {{ this.i18n.t('Local selection') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="el-icon-camera" :command="beforeHandleCommand(1,1,1)">
                        <!--终端扫描-->
                        {{ this.i18n.t('Terminal scan') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="icon iconfont-KUI icon-yuanchengkongzhi"
                                        :command="beforeHandleCommand(2,1,1)">
                        <!--远程采集-->
                        {{ this.i18n.t('Remote collection') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>

            </el-row>

          </el-tab-pane>
          <!--录入掌静脉-->
          <el-tab-pane :label="$t('input palm vein')" name="2">

            <el-row :gutter="20">
              <el-col :span="12">
                <!--左手-->
                <p>{{ this.i18n.t('The left hand') }}</p><br>
                <div class="picView" v-if="biodataInfos.hand_left.length">
                  <el-image
                      class="elImage"
                      :src="biodataInfos.hand_left[0].showBase64Pic"
                      fit="contain">
                  </el-image>
                  <div class="picTool">
                    <div class="picToolView">
                      <i class="el-icon-zoom-in toolIcon" @click="picPreview(2,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="icon iconfont-KUI icon-caijian toolIcon picClipper"
                         @click="picClipperFn(2,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                         @click="removePic(2,0)"></i>
                    </div>
                  </div>
                </div>

                <div
                    v-if="!biodataInfos.hand_left.length"
                    class="selectFileView">
                  <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                  <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                            <!--添加左手图像-->
                                              {{ this.i18n.t('Add Left Hand') }}
                                              <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-folder-opened"
                                        :command="beforeHandleCommand(0,2,0)">
                        <!--本地选择-->
                        {{ this.i18n.t('Local selection') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="el-icon-camera" :command="beforeHandleCommand(1,2,0)">
                        <!--终端扫描-->
                        {{ this.i18n.t('Terminal scan') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="icon iconfont-KUI icon-yuanchengkongzhi"
                                        :command="beforeHandleCommand(2,2,0)">
                        <!--远程采集-->
                        {{ this.i18n.t('Remote collection') }}
                      </el-dropdown-item>
                      <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>

              <el-col :span="12">
                <!--右手-->
                <p>{{ this.i18n.t('The right hand') }}</p><br>
                <div class="picView" v-if="biodataInfos.hand_right.length">
                  <el-image
                      class="elImage"
                      :src="biodataInfos.hand_right[0].showBase64Pic"
                      fit="contain">
                  </el-image>
                  <div class="picTool">
                    <div class="picToolView">
                      <i class="el-icon-zoom-in toolIcon" @click="picPreview(2,1)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="icon iconfont-KUI icon-caijian toolIcon picClipper"
                         @click="picClipperFn(2,1)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                         @click="removePic(2,1)"></i>
                    </div>
                  </div>
                </div>

                <div
                    v-if="!biodataInfos.hand_right.length"
                    class="selectFileView">
                  <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                  <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                            <!--添加右手图像-->
                                                  {{ this.i18n.t('Add Right Hand') }}
                                              <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-folder-opened"
                                        :command="beforeHandleCommand(0,2,1)">
                        <!--本地选择-->
                        {{ this.i18n.t('Local selection') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="el-icon-camera" :command="beforeHandleCommand(1,2,1)">
                        <!--终端扫描-->
                        {{ this.i18n.t('Terminal scan') }}
                      </el-dropdown-item>
                      <el-dropdown-item icon="icon iconfont-KUI icon-yuanchengkongzhi"
                                        :command="beforeHandleCommand(2,2,1)">
                        <!--远程采集-->
                        {{ this.i18n.t('Remote collection') }}
                      </el-dropdown-item>
                      <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>

            </el-row>

          </el-tab-pane>
          <!--录入掌纹-->
          <el-tab-pane :label="$t('Input palm print')" name="3">
            <el-row :gutter="20">
              <el-col :span="12">
                <!--左手-->
                <p>{{ this.i18n.t('The left hand') }}</p><br>
                <div class="picView" v-if="biodataInfos.palmprint_left.length">
                  <el-image
                      class="elImage"
                      :src="biodataInfos.palmprint_left[0].showBase64Pic"
                      fit="contain">
                  </el-image>
                  <div class="picTool">
                    <div class="picToolView">
                      <i class="el-icon-zoom-in toolIcon" @click="picPreview(3,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="icon iconfont-KUI icon-caijian toolIcon picClipper"
                         @click="picClipperFn(3,0)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                         @click="removePic(3,0)"></i>
                    </div>
                  </div>
                </div>

                <div
                    v-if="!biodataInfos.palmprint_left.length"
                    class="selectFileView">
                  <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                  <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                              <!--添加左手掌纹-->
                                               {{ this.i18n.t('Add Left Hand') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-folder-opened"
                                        :command="beforeHandleCommand(0,3,0)">
                        <!--本地选择-->
                        {{ this.i18n.t('Local selection') }}
                      </el-dropdown-item>
                      <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera" :command="beforeHandleCommand(1,3,0)">
                        <!--终端扫描-->
                        {{ this.i18n.t('Terminal scan') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>

              <el-col :span="12">
                <!--右手-->
                <p>{{ this.i18n.t('The right hand') }}</p><br>
                <div class="picView" v-if="biodataInfos.palmprint_right.length">
                  <el-image
                      class="elImage"
                      :src="biodataInfos.palmprint_right[0].showBase64Pic"
                      fit="contain">
                  </el-image>
                  <div class="picTool">
                    <div class="picToolView">
                      <i class="el-icon-zoom-in toolIcon" @click="picPreview(3,1)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="icon iconfont-KUI icon-caijian toolIcon picClipper"
                         @click="picClipperFn(3,1)"></i>
                      <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                         @click="removePic(3,1)"></i>
                    </div>
                  </div>
                </div>

                <div
                    v-if="!biodataInfos.palmprint_right.length"
                    class="selectFileView">
                  <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                  <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                            <!--添加右手掌纹-->
                                               {{ this.i18n.t('Add Right Hand') }}
                                              <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item icon="el-icon-folder-opened"
                                        :command="beforeHandleCommand(0,3,1)">
                        <!--本地选择-->
                        {{ this.i18n.t('Local selection') }}
                      </el-dropdown-item>
                      <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera" :command="beforeHandleCommand(1,3,1)">
                        <!--终端扫描-->
                        {{ this.i18n.t('Terminal scan') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>

            </el-row>
          </el-tab-pane>
          <!--录入指纹-->
          <el-tab-pane :label="$t('Enter fingerprint')" name="4">
            <el-row :gutter="0"
                    style="border: 0px solid red;overflow-y: scroll;height: 50vh;padding: 5px;overflow-x: hidden">
              <el-col :span="24">
                <el-row :gutter="20">
                  <el-col :span="5">
                    <!--左手大拇指-->
                    <p> {{ this.i18n.t('Left thumb') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint1.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint1[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,0)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,0)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,0)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint1.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                              <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,0)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,0)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--左手食指-->
                    <p> {{ this.i18n.t('Left index finger') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint2.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint2[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,1)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,1)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,1)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint2.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                             <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                              <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,1)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,1)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--左手中指-->
                    <p>{{ this.i18n.t('Left middle finger') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint3.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint3[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,2)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,2)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,2)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint3.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,2)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,2)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--左手无名指-->
                    <p>{{ this.i18n.t('Left ring finger') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint4.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint4[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,3)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,3)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,3)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint4.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,3)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,3)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--左手小拇指-->
                    <p>{{ this.i18n.t('Left little thumb') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint5.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint5[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,4)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,4)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,4)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint5.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,4)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,4)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                          <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="24" style="margin-top: 10px">
                <el-row :gutter="20">
                  <el-col :span="5">
                    <!--右手大拇指-->
                    <p>{{ this.i18n.t('right thumb') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint6.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint6[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,5)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,5)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,5)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint6.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,5)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,5)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                          <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--右手食指-->
                    <p>{{ this.i18n.t('Right index finger') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint7.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint7[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,6)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,6)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,6)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint7.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,6)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,6)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                          <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--右手中指-->
                    <p>{{ this.i18n.t('right middle finger') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint8.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint8[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,7)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,7)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,7)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint8.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,7)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,7)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                          <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--右手无名指-->
                    <p>{{ this.i18n.t('right ring finger') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint9.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint9[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,8)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,8)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,8)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint9.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,8)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,8)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                          <!--<el-dropdown-item divided icon="el-icon-delete">清空</el-dropdown-item>-->
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>

                  <el-col :span="5">
                    <!--右手小拇指-->
                    <p>{{ this.i18n.t('Right little thumb') }}</p><br>
                    <div class="picView" v-if="biodataInfos.fingerprint10.length">
                      <el-image
                          class="elImage"
                          :src="biodataInfos.fingerprint10[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(4,9)"></i>
                          <i v-if="handleEditOrAddType != 'view'"
                             class="icon iconfont-KUI icon-caijian toolIcon picClipper" @click="picClipperFn(4,9)"></i>
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(4,9)"></i>
                        </div>
                      </div>
                    </div>

                    <div
                        v-if="!biodataInfos.fingerprint10.length"
                        class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                               <!--添加指纹-->
                                               {{ this.i18n.t('Add fingerprint') }}
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,4,9)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                          <el-dropdown-item v-if="isShowCamera" icon="el-icon-camera"
                                            :command="beforeHandleCommand(1,4,9)">
                            <!--终端扫描-->
                            {{ this.i18n.t('Terminal scan') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!--访问码-->
          <el-tab-pane :label="$t('Accessing QR codes')" name="5">
            <el-row :gutter="20">
              <el-col :span="12" style="border-right: 1px solid #eaecf0;height: 50vh;overflow-y: scroll">
                <!--二维码有效期-->
                <el-form-item :label="$t('Validity period')" prop="qrTime">
                  <el-date-picker
                      style="width: 250px"
                      class="inputEl"
                      v-model="form.qrTime"
                      type="daterange"
                      align="right"
                      unlink-panels
                      value-format="yyyy-MM-dd"
                      range-separator="~"
                      :start-placeholder="$t('Start Date')"
                      :end-placeholder="$t('End Date')"
                  >
                  </el-date-picker>
                </el-form-item>
                <!--次数-->
                <el-form-item :label="$t('Frequency')" prop="qrCodeValidTimes">
                  <el-input placeholder="" v-model.number="form.qrCodeValidTimes">
<!--                    次-->
                    <template slot="append">{{ this.i18n.t('second') }}</template>
                  </el-input>
                  <!--                        <el-input @input="idCardInput" autocomplete="new-password" v-model="form.idCard"></el-input>-->
                </el-form-item>


              </el-col>
              <el-col :span="12" class="QRView">

                <el-row v-loading="invalidQRCode" :gutter="20"
                        :element-loading-text="$t('GenerateQRcodeTips1')"
                        element-loading-spinner="el-icon-lock"
                        element-loading-background="rgba(255, 255, 255, 0.95)">
                  <el-col :span="9" style="border: 0px solid red">
                    <div class="picView" v-if="biodataInfos.QRCode.length" v-loading="generateQRCodeLoading"
                         element-loading-background="rgba(255, 255, 255, 0.8)">
                      <el-image

                          class="elImage"
                          :src="biodataInfos.QRCode[0].showBase64Pic"
                          fit="contain">
                      </el-image>
                      <div class="picTool">
                        <div class="picToolView">
                          <i class="el-icon-zoom-in toolIcon" @click="picPreview(5,0)"></i>
                          <!--                          <i v-if="handleEditOrAddType != 'view'"-->
                          <!--                             class="icon iconfont-KUI icon-caijian toolIcon picClipper"-->
                          <!--                             @click="picClipperFn(5,0)"></i>-->
                          <i v-if="handleEditOrAddType != 'view'" class="el-icon-delete toolIcon"
                             @click="removePic(5,0)"></i>
                        </div>
                      </div>
                    </div>

                    <div v-if="!biodataInfos.QRCode.length"
                         class="selectFileView">
                      <!--<i style="font-size: 20px" class="el-icon-plus"></i>-->

                      <el-dropdown @command="handleCommand" :disabled="handleEditOrAddType == 'view'">
                                          <span class="el-dropdown-link">
                                              <!--添加二维码-->
                                            {{ this.i18n.t('Add QR code') }}
                                            <!--                                            {{this.i18n.t('Add facial image')}}-->
                                              <i class="el-icon-arrow-down el-icon--right"></i>
                                          </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item icon="el-icon-folder-opened"
                                            :command="beforeHandleCommand(0,5,0)">
                            <!--本地选择-->
                            {{ this.i18n.t('Local selection') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>

                    <vue-qr
                        v-show="false"
                        ref="qrCode"
                        :text="qrText"
                        :margin="10"
                        width="200"
                        height="200"
                        :callback="qrCodeCallback"
                    ></vue-qr>

                  </el-col>
                  <el-col :span="12" style="border: 0px solid red" v-if="biodataInfos.QRCode.length">
<!--                    下载二维码-->
                    <el-button size="small" @click="DownloadQRCode">{{ this.i18n.t('Download QR code') }}</el-button>
                    <br>
                    <br>
<!--                    解码-->
                    <el-button size="small" @click="QRCodeDecoding" :loading="decodingLoading">{{ this.i18n.t('decoding') }}</el-button>
                  </el-col>
                </el-row>
                <br>
                <br>
                <!--访问码-->
                <el-form-item :label="$t('Accessing QR codes')" prop="qrCode" v-loading="decodingLoading"
                              :element-loading-background="elLoadingConfig.background">
                  <el-input placeholder="" maxlength="500"
                            @focus="qrCodeInputFocus($event)"
                            @change="qrCodeChange"
                            :type="inputBoxType"
                            show-word-limit v-model="form.qrCode">
                    <!--                    <template slot="append">-->
                    <!--                      <el-button type="primary">生成</el-button>-->
                    <!--                    </template>-->

                  </el-input>
                  <el-button style="position: relative;left: 10px;bottom: 2px" size="small"
                             :loading="generateQRCodeLoading"
                             v-if="form.qrCode"
                             type="handle" class="" @click="generateQR(true)">
<!--                    生成二维码-->
                    {{ this.i18n.t('Generate QR code') }}
                  </el-button>

                  <!--                        <el-input @input="idCardInput" autocomplete="new-password" v-model="form.idCard"></el-input>-->
                </el-form-item>
                <el-form-item prop="qrCodeIsEncryption">
                  <span slot="label" style="display:inline-block;">
<!--                    是否加密-->
                    {{ this.i18n.t('Is it encrypted') }}
<!--                    选择加密后，生成二维码时，系统将根据加密后的字符串生成新的二维码-->
                      <el-tooltip effect="dark" :content="$t('GenerateQRcodeTips2')" placement="top">
                        <i class='el-icon-question'/>
                      </el-tooltip>
                  </span>
                  <el-radio-group
                      @change="qrCodeIsEncryptionChange"
                      v-model="form.qrCodeIsEncryption">
<!--                    是-->
                    <el-radio :label="1">{{ this.i18n.t('yes') }}</el-radio>
<!--                    否-->
                    <el-radio :label="0">{{ this.i18n.t('no') }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>

    <div class="footBtnBox" style="margin-top: 20px">
      <!--取消-->
      <el-button size="small" type="handle" @click="handleCloseDialog">{{ this.i18n.t('Cancel') }}</el-button>
      <!--继续添加-->
      <el-button size="small" type="primary" v-if="this.handleEditOrAddType=='add'"
                 :title="$t('After the addition is successful, clear the data without closing the popup window.')"
                 @click="submitForm(true)">{{ this.i18n.t('Continue to add') }}
      </el-button>
      <!--保存-->
      <el-button size="small" type="primary" v-if="this.handleEditOrAddType!='view'" :loading="saveLoading"
                 @click="submitForm(false)">
        {{ this.i18n.t('save') }}
      </el-button>
    </div>

    <!--图片查看弹窗-->
    <el-dialog :title="$t('Picture preview')" class="preview" width="40%" @close="closePreview" append-to-body :visible.sync="picViewFlag">
      <div style="text-align: center">
        <el-image
            :src="picViewSrc"
            fit="contain"></el-image>
      </div>
    </el-dialog>
    <el-dialog @close="dialogImageUrl=''" append-to-body v-if="dialogVisible" :visible.sync="dialogVisible">
      <!--<img width="100%" :src="dialogImageUrl" alt="">-->
      <div style="text-align: center">
        <el-image
            :src="dialogImageUrl"
            fit="contain"></el-image>
      </div>

    </el-dialog>

    <!--设备拍照-->
    <imageCollection ref='addOrgDialog'
                     :tabsIndex="tabsIndex" @setPicFn="setPicFn" :picIndex="picIndex"
                     :imageCollectionFlag.sync='imageCollectionFlag' v-if='imageCollectionFlag'></imageCollection>
    <!--远程采集-->
    <remoteCollection ref='remoteCollectionDialog'
                      :tabsIndex="tabsIndex" @setPicFn="setPicFn" :picIndex="picIndex"
                      :remoteCollectionFlag.sync='remoteCollectionFlag' v-if='remoteCollectionFlag'></remoteCollection>


    <!--本地选择图片-->
    <localSelectionImages :tabsIndex="tabsIndex" @setPicFn="setPicFn" :picIndex="picIndex"
                          ref='localSelectionImagesDialog'
                          :localSelectionImagesFlag.sync='localSelectionImagesFlag'
                          v-if='localSelectionImagesFlag'></localSelectionImages>
    <!--图片编辑（剪切）-->
    <picClipper :tabsIndex="tabsIndex" @setPicFn="setPicFn" :picIndex="picIndex"
                ref='picClipperDialog'
                :picBase64Data="picBase64Data"
                :picClipperFlag.sync='picClipperFlag'
                v-if='picClipperFlag'></picClipper>

    <!--是否应用到设备弹窗-->
    <deleteDialog ref='deleteDialog' :deleteFlag.sync='deleteFlag' v-if='deleteFlag'></deleteDialog>

  </el-dialog>
</template>

<script>
import deleteDialog from './deleteDialog.vue';
import picClipper from './picClipper.vue'
import imageCollection from './imageCollection.vue'
import localSelectionImages from './localSelectionImages.vue'
import remoteCollection from './remoteCollection.vue'

import {sexList} from '@/assets/common/js/utils/deviceConfig.js'
import nullPic from "@/assets/common/img/nullPic.jpg"
import {getParentsById, filterLastTreeData} from './utils.js'
import {checkIsEmpty,getMonthDate} from '@/assets/common/js/global'
import {
  getdepartmenttree,
  personnelinfoUpdate,
  personnelinfoCreate,
  fileFiletobase64,
  personnelinfoReadnfc,
  fileImageconverttobase64,
  personnelinfoEncryppassword
} from "@/api/pcmj/zzxx";
import fa from "element-ui/src/locale/lang/fa";
import {attendancegroupGetlist} from "@/api/pcmj/kqz";
import jsQR from "jsqr";
import VueQr from 'vue-qr'

export default {
  name: "AddOrEdit",
  components: {
    deleteDialog,
    imageCollection,
    picClipper,
    localSelectionImages,
    remoteCollection,
    VueQr
  },
  props: {
    handleEditOrAddType: {
      type: String,
      default: 'add'
    },
    editOrAddFlag: {
      type: Boolean,
      default: false
    },
    editTableRow: {
      type: Object,
      defautl: () => {
        return {}
      }
    }
  },
  filters: {},

  computed: {
    // 把本地绝对路径的图片转换成base64格式的图片
    //  localImageToBase64(){
    //
    //
    //     //
    //     //  return
    //     // return async (localSrc)=>{
    //     //     console.log('computed localSrc',localSrc);
    //     //     var res=await fileImageconverttobase64(localSrc)
    //     //     console.log('computed994',res);
    //     //     return res
    //     // }
    // },
    getStoreBiodataInfos() {
      return this.$store.state.biodataInfos
    },
  },
  watch: {
    'form.qrCode'(newVal, oldVal) {
      if (this.form.qrCode) {
        this.form.qrCode = newVal.replaceAll(" ", "")
      }

      console.log(1231, this.form.qrCode, this.qrText);
      if (this.form.qrCode&&this.form.qrCode != this.qrText) {
        if (this.handleEditOrAddType == 'add' && !this.biodataInfos.QRCode.length) {
          this.invalidQRCode = false
        } else {
          if (this.biodataInfos.QRCode.length){
            this.invalidQRCode = true
          }

        }
      } else {
        this.invalidQRCode = false
      }

    },
    '$store.state.idCard': {
      handler(newVal, oldVal) {
        //对数据执行操作
        console.log('身份证号变化了', newVal, oldVal)
        this.form.idCard = newVal
      },
      deep: true // 深度监听
    },
    // getStoreBiodataInfos:{
    //     handler(nval, oval) {
    //         console.log(nval, oval);//nval改变后的新数据，oval改变前的旧数据
    //         console.log('生物数据变化了1004',nval)
    //         this.biodataInfos=nval
    //     },
    //     deep: true, // 深度监听
    //     immediate: true,//立即执行
    // },
    '$store.state.image'(newVal, oldVal) {
      //对数据执行操作
      console.log('头像变化了', newVal)
      if (newVal) {
        this.setStoreBiodataInfos('face', {showBase64Pic: newVal})
      }

      // this.form.facePath=newVal
    },
    '$store.state.name'(newVal, oldVal) {
      //对数据执行操作
      console.log('名字变化了', newVal, oldVal)
      this.form.name = newVal
    },
    '$store.state.sex'(newVal, oldVal) {
      //对数据执行操作
      console.log('性别变化了', newVal, oldVal)
      this.form.sex = newVal
    },
    '$store.state.nfcCode'(newVal, oldVal) {
      //对数据执行操作
      console.log('门禁卡的卡号变化了*************', newVal, oldVal)
      this.form.nfcCode = newVal
    },
    applyToDevice(newVal, oldVal) {
      console.log('应用到设备', newVal, oldVal);
    }
  },
  data() {
    var validateQrTime = (rule, value, callback) => {
      console.log(rule, value, callback);
          if (checkIsEmpty(this.form.qrCode)){
            if (!value) {
              // 请选择有效期
              callback(new Error(this.i18n.t('Please select an expiration date')));
            } else {
              callback();
            }
          } else {
            callback();
          }

    };
    var validateQrCodeValidTimes = (rule, value, callback) => {
      console.log(value);
      if (checkIsEmpty(this.form.qrCode)){
        var reg = /^[0-9]+$/
        if (value === '' || value === null || value === undefined) {
          // 请输入次数
          callback(new Error(this.i18n.t('Please enter the number of times')));
        } else if (!reg.test(value)) {
          // 只能输入数字
          callback(new Error(this.i18n.t('Only numbers can be entered')));
        } else {
          callback();
        }
      }else{
        callback();
      }

    };
    var validateQrCode = (rule, value, callback) => {
      console.log(value);
      callback();
      return
      if (value === '' || value === null || value === undefined) {
        // 请输入访问码
        callback(new Error(this.i18n.t('Please enter the access code')));
      } else {
        callback();
      }
    };
    var validateName = (rule, value, callback) => {
      if (value == '') {
        // 请输入姓名
        callback(new Error(this.i18n.t('Please enter your name')));
      } else if (!this.$rules.name.reg.test(value)) {
        callback(new Error(this.$rules.name.min + '~' + this.$rules.name.max + ' ' + this.i18n.t('bits')));
      } else {
        callback();
      }
    };

    var validateJobNumber = (rule, value, callback) => {

      if (value === '') {
        // 请输入编号(工号)
        callback(new Error(this.i18n.t('Please enter the number (job number)')));
      }
          // else  if (!this.$rules.jobNumber.reg.test(value)) {
          //     callback(new Error(this.i18n.t(this.$rules.jobNumber.errMsg)));
      // }
      else {
        callback();
      }

    };
    var validateTelephone = (rule, value, callback) => {
      value = value || ""

      // if (value == '') {
      //     callback(new Error('请输入手机号'));
      // } else if (!this.$rules.phone.test(value)) {
      //     callback(new Error("手机号格式不正确"));
      // } else {
      //     callback();
      // }


      // 允许为空逻辑
      if (value !== "") {
        if (!this.$rules.phone.test(value)) {
          // 手机号格式不正确
          // callback(new Error(this.i18n.t('The format of the mobile phone number is incorrect')));
          // 只能输入数字
          callback(new Error(this.i18n.t('Only numbers can be entered')));
        } else {
          callback();
        }
      } else {
        console.log('手机号验证通过');
        callback();
      }

    };
    var validateIdCard = (rule, value, callback) => {
      value = value || ""
      // // 允许为空逻辑
      if (value !== "") {
        if (!this.$rules.idCard.reg.test(value)) {
          callback(new Error(this.i18n.t(this.$rules.idCard.errMsg)));
        } else {
          callback();
        }
      } else {
        console.log('卡号验证通过');
        callback();
      }

      // 不允许为空逻辑
      // if (value == '') {
      //     callback(new Error('请输入证件号码'));
      // } else if (!this.$rules.idCard.reg.test(value)) {
      //     callback(new Error("英文、数字，长度" + this.$rules.idCard.min + '~' + this.$rules.idCard.max + '位'));
      // } else {
      //     callback();
      // }
    };
    return {
      errorTabsIndex:-1,
      inputBoxType: "text",
      decodingLoading: false,
      generateQRCodeLoading: false,
      invalidQRCode: false,
      pickerOptions: {
        shortcuts: [{
          // 最近一周
          text: this.i18n.t('Last week'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          // 最近一个月
          text: this.i18n.t('Last month'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          // 最近三个月
          text: this.i18n.t('Last three months'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      regDate: '',
      biodataInfos: null,
      applyToDevice: [],
      deleteFlag: false,
      picBase64Data: null,
      picClipperFlag: false,
      saveLoading: false,
      fingerprint0: [],
      fingerprint1: [],
      fingerprint2: [],
      fingerprint3: [],
      fingerprint4: [],
      fingerprint5: [],
      fingerprint6: [],
      fingerprint7: [],
      fingerprint8: [],
      fingerprint9: [],
      leftPalmPrint: [],
      rightPalmPrint: [],
      picViewFlag: false,
      picViewSrc: null,
      tabsIndex: 0,
      picIndex: 0,
      localSelectionImagesFlag: false,
      imageCollectionFlag: false,
      rules: {
        qrCodeIsEncryption: [
          {required: false, trigger: 'blur'}
        ],
        qrTime: [
          {validator: validateQrTime, required: false, trigger: 'blur'}
        ],
        qrCodeValidTimes: [
          {validator: validateQrCodeValidTimes, required: false, trigger: 'blur'}
        ],
        qrCode: [
          {validator: validateQrCode, required: false, trigger: 'blur'}
        ],
        name: [
          {validator: validateName, required: true, trigger: 'blur'}
        ],

        jobNumber: [
          {validator: validateJobNumber, required: true, trigger: 'blur'}
        ],
        telephone: [
          {validator: validateTelephone, required: false, trigger: 'blur'}
        ],
        idCard: [
          {validator: validateIdCard, required: false, trigger: 'blur'}
        ],
        sex: [
          // 请选择性别
          {required: true, trigger: 'blur', message: this.i18n.t('Please select gender')}
        ],
        zzid: [
          // 请选择组织
          {required: true, trigger: 'blur', message: this.i18n.t('Please select an organization')}
        ]
      },
      defaultProps: {
        children: 'departmentInfos',
        label: 'name',
        value: 'id',
        checkStrictly: true,
        disabled: function (data, node) {

        }
      },
      rightHandHideUpload0: false,
      rightHandHideUpload1: false,
      rightHandHideUpload2: false,
      leftHandHideUpload0: false,
      leftHandHideUpload1: false,
      leftHandHideUpload2: false,
      leftEyeHideUpload: false,
      rightEyeHideUpload: false,
      basicHideUpload: false,
      dialogImageUrl: "",
      dialogVisible: false,
      continueAddFlag: false,//继续添加
      accept: '.png,.jpg',
      readnfcLoading: false,
      cameraType: null,//掌静脉摄像头开关
      leftEyePic: null,//左眼
      rightEyePic: null,//右眼
      fileList: [],
      activeName: '0',
      hand_left: [],//左手
      hand_right: [],//右手
      form: {
        qrTime: '',
        password: "",
        attendanceGroupId: null,
        facePath: null,
        jobNumber: "",
        imagePath: null,
        name: '',
        telephone: '',
        idCard: "",
        nfcCode: '',
        sex: 0,
        zzid: -1,
        kh: new Date().getTime(),
        // 二维码字符串
        qrCode: null,
        // 二维码是否加密
        qrCodeIsEncryption: 0,
        // 二维码开始时间
        qrCodeValidTime0: null,
        // 二维码结束时间
        qrCodeValidTime1: null,
        // 二维码有效次数
        qrCodeValidTimes: 1,
      },
      title: '',
      orgInfo: [],
      sexList: null,
      isShowCamera: false,
      remoteCollectionFlag: false,
      grouplist: [],
      applyType: -1,
      qrText: "",
      qrBase64Url: null,
    }
  },
  async mounted() {
    // 获取考勤组列表
    this.attendancegroupGetlist({
      pageNumber: 1,
      pageSize: 999,
      name: null
    })
    var _this = this
    this.$store.commit('setisAddPeoplePage', true)
    this.biodataInfos = this.$store.state.biodataInfos
    this.sexList = sexList
    // 加载组织级联数据
    this.getdepartmenttree()
    var handelType = {
      "add": this.i18n.t('Add'),
      "edit": this.i18n.t('edit'),
      "view": this.i18n.t('view')
    }
    this.title = handelType[this.handleEditOrAddType]


    console.log('editTableRow：', this.editTableRow, this.title, this.$store.state.biodataInfos, this.biodataInfos);
    if (this.handleEditOrAddType == 'edit' || this.handleEditOrAddType == 'view') {

      this.form = JSON.parse(JSON.stringify(this.editTableRow))
      if (this.form.departmentInfoId == null) {
        this.form.zzid = -1
      } else {
        this.form.zzid = this.form.departmentInfoId
      }

      // 所有图片数据都存放在biodataInfos对象内，如果此属性不存在，则不处理后续
      if (!this.editTableRow.biodataInfos) {
        return
      }
      var row = this.editTableRow.biodataInfos

      // 下面是初始化生物数据（图片回显）
      // 人脸
      if ('face' in row && row.face.length) {
        this.localSrcToBase64(row.face[0].fileInfo).then(async res => {
          await this.setStoreBiodataInfos('face', {
            identityId: row.face[0].identityId,
            fileInfo: row.face[0].fileInfo,
            picDiskPath: row.face[0].fileInfo,
            showBase64Pic: res,
            saveBase64Pic: -1
          })
        })
        console.log('You头像', this.biodataInfos['face']);
      } else {
        console.log('无头像');
      }

      function setSaveBase64(key) {
        console.log('key', key);
        fileFiletobase64({filePath: row[key][0].fileInfo}).then(res => {
          _this.$store.commit('updateBiodataInfos', {
            key: key,
            attributeName: 'saveBase64Pic',
            value: res
          })
        })
      }

      this.$nextTick(async () => {

        // 左眼
        if ('eye_left' in row && row.eye_left.length) {
          this.localSrcToBase64(row.eye_left[0].fileInfo).then(res => {

            this.setStoreBiodataInfos('eye_left', {
              identityId: row.eye_left[0].identityId,
              fileInfo: row.eye_left[0].fileInfo,
              picDiskPath: row.eye_left[0].fileInfo,
              showBase64Pic: res,
              saveBase64Pic: -1
            })
          })
        }

        // 右眼
        if ('eye_right' in row && row.eye_right.length) {
          this.localSrcToBase64(row.eye_right[0].fileInfo).then(res => {

            this.setStoreBiodataInfos('eye_right', {
              identityId: row.eye_right[0].identityId,
              fileInfo: row.eye_right[0].identityId,
              picDiskPath: row.eye_right[0].fileInfo,
              showBase64Pic: res,
              saveBase64Pic: -1
            })

          })
        }


        // 左手掌静脉
        if ('hand_left' in row && row.hand_left.length) {
          this.localSrcToBase64(row.hand_left[0].fileInfo).then(res => {
            // this.$set(this.hand_left,0,res)
            this.setStoreBiodataInfos('hand_left', {
              identityId: row.hand_left[0].identityId,
              fileInfo: row.hand_left[0].fileInfo,
              picDiskPath: row.hand_left[0].fileInfo,
              showBase64Pic: res,
              saveBase64Pic: -1
            })
          })
        }

        // 右手掌静脉
        if ('hand_right' in row && row.hand_right.length) {
          this.localSrcToBase64(row.hand_right[0].fileInfo).then(res => {
            // this.$set(this.hand_right,0,res)
            this.setStoreBiodataInfos('hand_right', {
              identityId: row.hand_right[0].identityId,
              fileInfo: row.hand_right[0].fileInfo,
              picDiskPath: row.hand_right[0].fileInfo,
              showBase64Pic: res,
              saveBase64Pic: -1
            })
          })
        }

        // 左手掌纹
        if ('palmprint_left' in row && row.palmprint_left.length) {
          this.localSrcToBase64(row.palmprint_left[0].fileInfo).then(res => {
            // this.$set(this.leftPalmPrint,0,res)

            this.setStoreBiodataInfos('palmprint_left', {
              identityId: row.palmprint_left[0].identityId,
              fileInfo: row.palmprint_left[0].fileInfo,
              picDiskPath: row.palmprint_left[0].fileInfo,
              showBase64Pic: res,
              saveBase64Pic: -1
            })

          })
        }

        // 右手掌纹
        if ('palmprint_right' in row && row.palmprint_right.length) {
          this.localSrcToBase64(row.palmprint_right[0].fileInfo).then(res => {
            // this.$set(this.rightPalmPrint,0,res)

            this.setStoreBiodataInfos('palmprint_right', {
              identityId: row.palmprint_right[0].identityId,
              fileInfo: row.palmprint_right[0].fileInfo,
              picDiskPath: row.palmprint_right[0].fileInfo,
              showBase64Pic: res,
              saveBase64Pic: -1
            })

          })
        }

        for (let i = 1; i <= 10; i++) {
          if ('fingerprint' + i in row && (row['fingerprint' + i]).length) {
            this.localSrcToBase64(row['fingerprint' + i][0].fileInfo).then(res => {

              this.setStoreBiodataInfos('fingerprint' + i, {
                identityId: row['fingerprint' + i][0].identityId,
                fileInfo: row['fingerprint' + i][0].fileInfo,
                picDiskPath: row['fingerprint' + i][0].fileInfo,
                showBase64Pic: res,
                saveBase64Pic: -1
              })

            })
          }
        }

        if (this.handleEditOrAddType == 'edit') {
          this.$nextTick(async () => {
            setTimeout(() => {
              console.log(this.biodataInfos);
              var bioItem = ["face", "eye_left", "eye_right", "hand_left", "hand_right", "palmprint_left", "palmprint_right"]
              bioItem.map(item => {
                if (this.biodataInfos[item].length) {
                  var fileInfo = this.biodataInfos[item][0].fileInfo
                  var suffix = fileInfo.substring(fileInfo.lastIndexOf('.') + 1)
                  // 是jp2格式的图片时，再设置saveBase64Pic属性，节省内存占用
                  if (suffix == 'jp2' && this.biodataInfos[item].length) {
                    setSaveBase64(item)
                  }
                }

              })
              for (var i = 1; i <= 10; i++) {
                if (_this.biodataInfos["fingerprint" + i].length) {
                  var fileInfo = _this.biodataInfos["fingerprint" + i][0].fileInfo
                  var suffix = fileInfo.substring(fileInfo.lastIndexOf('.') + 1)
                  if (suffix == 'jp2' && _this.biodataInfos["fingerprint" + i].length) {

                    setSaveBase64("fingerprint" + i)
                  }
                }

              }
              setTimeout(() => {
                console.log('storae的数据', _this.biodataInfos);
              }, 500)

            }, 1000)
          })
        }


      })

      // 访问码页面有效期
      if (this.form.qrCodeValidTime0 && this.form.qrCodeValidTime1) {
        this.form.qrTime = [this.form.qrCodeValidTime0, this.form.qrCodeValidTime1]
      } else {
        this.form.qrTime = ""
      }

      // 如果有访问码，生成二维码
      if (this.form.qrCode) {
        // 页面初始化时不调用访问码加密接口
        this.generateQR(false)
      }

      // 访问码页面是否加密
      this.form.qrCodeIsEncryption = this.form.qrCodeIsEncryption *= 1

      // if (this.editTableRow.qrCodeIsEncryption){
      //   this.inputBoxType="password"
      // }else{
      //   this.inputBoxType="text"
      // }

    } else if (this.handleEditOrAddType == 'add') {
      this.form.zzid = -1
    }

  },
  methods: {
    qrCodeChange(){
      // 当访问码为空时，清除有效期、次数的表单验证
      if (!checkIsEmpty(this.form.qrCode)){
        // 访问码次数
        this.$refs.ruleForm.clearValidate("qrCodeValidTimes")
        // 访问码有效期
        this.$refs.ruleForm.clearValidate("qrTime")
      }else{
        // 访问码不为空时，触发有效期、次数的表单验证
        this.$refs.ruleForm.validateField('qrCodeValidTimes');
        this.$refs.ruleForm.validateField('qrTime');
      }
    },
    qrCodeInputFocus(e) {
      console.log(e);
      // e.currentTarget.select()
    },
    qrCodeIsEncryptionChange() {
      if (this.form.qrCodeIsEncryption && this.form.qrCode != null && this.form.qrCode != "") {
        // this.personnelinfoEncryppassword({qrCode:this.form.qrCode})
        this.generateQR(true)
      }
    },
    // 修改二维码
    modifyQRCode() {
      this.generateQRCodeLoading = true
      this.invalidQRCode = false
      setTimeout(() => {
        var params = {
          tabsIndex: 5,
          picIndex: 0,
          showBase64Pic: this.qrBase64Url,
          saveBase64Pic: null,
          fileInfo: null
        }
        this.setStoreBiodataInfos('QRCode', params)
        this.generateQRCodeLoading = false
        console.log('生成后的二维码图片' + new Date().toLocaleTimeString() + "." + new Date().getMilliseconds(), this.qrBase64Url);
      }, 500)

    },
    // 生成二维码
    generateQR(encryptionSwitch) {
      // 不加密时，直接生成二维码
      if (!this.form.qrCodeIsEncryption) {
        this.qrText = this.form.qrCode
        // 重新生成二维码
        this.modifyQRCode()
      } else {
        if (encryptionSwitch) {
          // 调用加密方法，对访问码进行加密
          this.personnelinfoEncryppassword({qrCode: this.form.qrCode})
        } else {
          this.qrText = this.form.qrCode
          // 重新生成二维码
          this.modifyQRCode()
        }

      }

    },
    qrCodeCallback(url) {
      console.log('二维码回调图片' + new Date().toLocaleTimeString() + "." + new Date().getMilliseconds(), url);
      this.qrBase64Url = url
    },
    // 获取考勤组列表
    attendancegroupGetlist(params) {
      attendancegroupGetlist(params).then(res => {
        if (res.code == 200) {
          this.grouplist = [
            {
              // 快捷选项
              label: this.i18n.t('Quick Options'),
              options: [
                {
                  // 无
                  name: this.i18n.t('nothing'),
                  id: null,
                }
              ]
            },
            {
              // 考勤组列表
              label: this.i18n.t('Attendance Group List'),
              options: res.data.values
            }
          ]
          // this.grouplist=res.data.values || []
          // this.dataList.values.map(item=>{
          //   this.$set(item, 'loading', false)
          // })
        }
      })
    },
    // attendancegroup/getlist
    sexChange(value) {
      this.$store.commit('setSex', value)
    },
    nameInput(value) {
      this.form.name = value
      this.$store.commit('setName', value)
    },
    //证件号码input事件，如果不监听input事件，手动修改证件号码后，会出现读卡器读到数据后页面不能显示的问题
    idCardInput(value) {
      console.log(value);
      this.form.idCard = value
      this.$store.commit('setIdCard', value)
    },
    // 重置保存按钮的loading状态
    resetLoading() {
      this.saveLoading = false
    },
    // 修改人员时，接收 是否应用到设备弹窗传递过来的值
    applyToDeviceFn(data) {
      if (this.applyType == 2) {
        // 修改人员
        var params = this.getParams()
        params.applyDeviceIds = data
        console.log('修改人员时JSON', params);
        this.personnelinfoUpdate(params)
        return
        // 如果访问码加密,调用接口对访问码进行加密
        if (params.qrCodeIsEncryption) {
          this.personnelinfoEncryppassword(params)
        } else {
          this.personnelinfoUpdate(params)
        }


      }
    },

    /*
    * 本地磁盘绝对路径的图片地址，转成base64
    *
    * */
    async localSrcToBase64(localSrc) {
      var result = ""
      var suffix = localSrc.substring(localSrc.lastIndexOf('.') + 1)
      await fileImageconverttobase64(localSrc).then((res) => {
        result = res
      }).catch().finally(() => {
      })

      // if (suffix == 'jp2') {
      //     await fileImageconverttobase64(localSrc).then((res) => {
      //         result=res
      //     }).catch().finally(() => {
      //     })
      // } else {
      //     await this.fileFiletobase64(localSrc).then(res => {
      //         result=res
      //     })
      // }
      return result
    },
    closePreview() {
      this.picViewFlag = false
      this.picViewSrc = null
    },
    // 图片编辑(剪切)
    picClipperFn(tabsIndex, picIndex) {

      if (tabsIndex == 0) {
        // 人脸
        this.picBase64Data = this.biodataInfos.face[0].showBase64Pic
      } else if (tabsIndex == 1) {
        // 虹膜
        if (picIndex == 0) {
          // 左眼
          this.picBase64Data = this.biodataInfos.eye_left[0].showBase64Pic
        } else if (picIndex == 1) {
          // 右眼
          this.picBase64Data = this.biodataInfos.eye_right[0].showBase64Pic
        }
      } else if (tabsIndex == 2) {
        // 掌静脉
        if (picIndex == 0) {
          // 左手
          this.picBase64Data = this.biodataInfos.hand_left[0].showBase64Pic
        } else if (picIndex == 1) {
          // 右手
          this.picBase64Data = this.biodataInfos.hand_right[0].showBase64Pic
        }
      } else if (tabsIndex == 3) {
        // 掌纹
        if (picIndex == 0) {
          // 左手
          this.picBase64Data = this.biodataInfos.palmprint_left[0].showBase64Pic
        } else if (picIndex == 1) {
          // 右手
          this.picBase64Data = this.biodataInfos.palmprint_right[0].showBase64Pic
        }
      } else if (tabsIndex == 4) {
        console.log(this.biodataInfos['fingerprint' + (picIndex + 1)]);
        // 指纹
        this.picBase64Data = this.biodataInfos['fingerprint' + (picIndex + 1)][0].showBase64Pic
      } else if (tabsIndex == 5) {
        // 访客码
        this.picBase64Data = this.biodataInfos['QRCode'][0].showBase64Pic
      }
      this.picClipperFlag = true
    },
    // 图片预览
    picPreview(tabsIndex, picIndex) {
      if (tabsIndex == 0) {
        // 人脸
        this.picViewSrc = this.biodataInfos.face[0].showBase64Pic
      } else if (tabsIndex == 1) {
        // 虹膜
        if (picIndex == 0) {
          // 左眼
          this.picViewSrc = this.biodataInfos.eye_left[0].showBase64Pic
        } else if (picIndex == 1) {
          // 右眼
          this.picViewSrc = this.biodataInfos.eye_right[0].showBase64Pic
        }
      } else if (tabsIndex == 2) {
        // 掌静脉
        if (picIndex == 0) {
          // 左手
          this.picViewSrc = this.biodataInfos.hand_left[0].showBase64Pic
        } else if (picIndex == 1) {
          // 右手
          this.picViewSrc = this.biodataInfos.hand_right[0].showBase64Pic
        }
      } else if (tabsIndex == 3) {
        // 掌纹
        if (picIndex == 0) {
          // 左手
          this.picViewSrc = this.biodataInfos.palmprint_left[0].showBase64Pic
        } else if (picIndex == 1) {
          // 右手
          this.picViewSrc = this.biodataInfos.palmprint_right[0].showBase64Pic
        }
      } else if (tabsIndex == 4) {
        // 指纹
        // this.picViewSrc = this['fingerprint' + picIndex][0]
        console.log('指纹下标', picIndex, this.biodataInfos['fingerprint' + (picIndex + 1)]);
        this.picViewSrc = this.biodataInfos['fingerprint' + (picIndex + 1)][0].showBase64Pic
      } else if (tabsIndex == 5) {
        // 访客码
        this.picViewSrc = this.biodataInfos['QRCode'][0].showBase64Pic
      }
      this.picViewFlag = true
    },
    // 删除图片
    removePic(tabsIndex, picIndex) {
      console.log(tabsIndex, picIndex);
      if (tabsIndex == 0) {
        this.setStoreBiodataInfos('face', null)
      } else if (tabsIndex == 1) {
        if (picIndex == 0) {
          // 左眼
          this.setStoreBiodataInfos('eye_left', null)
        } else if (picIndex == 1) {
          // 右眼
          this.setStoreBiodataInfos('eye_right', null)
        }
      } else if (tabsIndex == 2) {
        // 掌静脉
        if (picIndex == 0) {
          console.log('左手');
          this.setStoreBiodataInfos('hand_left', null)
        } else if (picIndex == 1) {
          console.log('右手');
          this.setStoreBiodataInfos('hand_right', null)
        }
      } else if (tabsIndex == 3) {
        // 掌纹
        if (picIndex == 0) {
          console.log('左手');
          this.setStoreBiodataInfos('palmprint_left', null)
        } else if (picIndex == 1) {
          console.log('右手');
          this.setStoreBiodataInfos('palmprint_right', null)
        }
      } else if (tabsIndex == 4) {
        this.setStoreBiodataInfos('fingerprint' + (picIndex + 1), null)
      } else if (tabsIndex == 5) {
        // 访客码
        this.setStoreBiodataInfos('QRCode', null)

        this.qrText = ""
        this.qrBase64Url = null
        this.form.qrCode = null



      }

    },
    setStoreBiodataInfos(key, data) {
      // debugger
      var value = data === null ? null : {
        identityId: data.identityId || null,
        fileInfo: data.fileInfo || null,
        showBase64Pic: data.showBase64Pic || null,
        saveBase64Pic: data.saveBase64Pic || null
        // picDiskPath:data.picDiskPath
      }
      this.$store.commit('setbiodataInfos', {
        key: key,
        value: value
      })


    },
    setPicFn(obj) {
      console.log('父组件收到数据了：', obj);
// debugger
      // 人脸图像
      if (obj.tabsIndex == 0) {
        // this.form.facePath = obj.result
        this.setStoreBiodataInfos('face', obj)
      } else if (obj.tabsIndex == 1) {
        // 虹膜tabs
        if (obj.picIndex == 0) {
          console.log('左眼');
          // this.leftEyePic = obj.result
          this.setStoreBiodataInfos('eye_left', obj)
        } else if (obj.picIndex == 1) {
          console.log('右眼');
          // this.rightEyePic = obj.result
          this.setStoreBiodataInfos('eye_right', obj)
        }
      } else if (obj.tabsIndex == 2) {
        // 掌静脉tabs
        if (obj.picIndex == 0) {
          console.log('左手');
          // this.$set(this.hand_left, 0, obj.result)

          this.setStoreBiodataInfos('hand_left', obj)

        } else if (obj.picIndex == 1) {
          console.log('右手');
          // this.$set(this.hand_right, 0, obj.result)
          this.setStoreBiodataInfos('hand_right', obj)
        }
      } else if (obj.tabsIndex == 3) {
        // 掌纹tabs
        if (obj.picIndex == 0) {
          console.log('左手');
          this.setStoreBiodataInfos('palmprint_left', obj)
          // this.$set(this.leftPalmPrint, 0, obj.result)
        } else if (obj.picIndex == 1) {
          console.log('右手');
          this.setStoreBiodataInfos('palmprint_right', obj)
          // this.$set(this.rightPalmPrint, 0, obj.result)
        }
      } else if (obj.tabsIndex == 4) {
        console.log('指纹', 'fingerprint' + (obj.picIndex + 1));
        // 指纹
        this.setStoreBiodataInfos('fingerprint' + [obj.picIndex + 1], obj)
        // this.$set(this['fingerprint' + obj.picIndex], 0, obj.result)
      } else if (obj.tabsIndex == 5) {
        console.log('访客码', 'QR code' + (obj.picIndex + 1));
        // 访客码
        this.setStoreBiodataInfos('QRCode', obj)
        setTimeout(() => {
          // 选择完二维码后，马上解码
          this.QRCodeDecoding()
        }, 200)

        // if (key=="QRCode"&&data){
        //   this.QRCodeDecoding()
        // }
        // this.$set(this['fingerprint' + obj.picIndex], 0, obj.result)
      }

      console.log('store的数据', this.$store.state.biodataInfos);
    },

    personnelinfoEncryppassword(params) {
      personnelinfoEncryppassword({passWord: params.qrCode}).then((res) => {
        if (res.code == 200) {
          this.qrText = res.data
          this.form.qrCode = res.data
          // 重新生成二维码
          this.modifyQRCode()

          // params.qrCode=res.data
          // if (this.handleEditOrAddType == 'edit') {
          //   this.personnelinfoUpdate(params)
          // }else{
          //   this.personnelinfoCreate(params)
          // }

        }
      })
    },
    // 下载二维码
    DownloadQRCode() {
      let time = new Date().toLocaleString();
      let a = document.createElement("a");
      a.style.display = "none";
      a.download = this.i18n.t('Accessing QR codes') + time + ".jpg";
      // a.download = this.form.qrCode+".jpg";
      // a.download = name+".jpg";
      a.href = this.biodataInfos.QRCode[0].showBase64Pic;
      document.body.appendChild(a);
      a.click();
      // a.remove()
    },
    // 二维码解码
    QRCodeDecoding() {
      this.createQRImage()
    },
    createQRImage() {
      this.decodingLoading = true
      var imgNode = document.getElementById("QRImage")
      if (imgNode) {
        imgNode.remove()
      }

      const image = new Image();
      image.src = this.biodataInfos.QRCode[0].showBase64Pic;
      image.id = "QRImage";
      image.onload = () => {
        let code = this.decodeQRCode(image);
        if (code.length > 500) {
          // 二维码信息超过500位字符，解码失败！
          this.W.$tips("warning", this.i18n.t('GenerateQRcodeTips5'));
          setTimeout(() => {
            this.decodingLoading = false
          }, 500)
          return

        }
        console.log(code)//识别结果
        this.form.qrCode = code.replaceAll(" ", "");
        this.qrText = this.form.qrCode
        setTimeout(() => {
          this.decodingLoading = false
        }, 500)
        // this.qrText=this.form.qrCode
      };

    },
    decodeQRCode(image) {
      console.log('image', image);

      var QRCanvasNode = document.getElementById("QRCanvas")
      if (QRCanvasNode) {
        QRCanvasNode.remove()
      }
      //创建画布
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.id = "QRCanvas";
      canvas.width = image.width;
      canvas.height = image.height;
      //把二维码画上去
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      //jsQR识别出来
      console.log('识别前的数据',
          imageData.data, imageData.width, imageData.height,
      );
      const decodedResult = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: 'dontInvert',
      });
      if (decodedResult) {
        //返回识别结果
        return decodedResult.data
      } else {
        // 解码失败，请选择正确的二维码图片！
        this.W.$tips("warning", this.i18n.t('GenerateQRcodeTips4'));
        return ''
      }
    },
    /*
    * commandType:图片选择类型，0：选择本地电脑的图片，1：摄像头拍照
    * tabsIndex：顶部选项卡激活的下标，0：基本信息，1：虹膜，2：掌静脉，3：掌纹，4指纹，5访客码
    * picIndex：图片下标，0：第一张，1：第二张......
    * */
    beforeHandleCommand(commandType, tabsIndex, picIndex) {
      return {
        tabsIndex,
        picIndex,
        commandType
      }
    },
    handleCommand(command) {
      this.tabsIndex = command.tabsIndex
      this.picIndex = command.picIndex
      console.log('command', command);
      // this.$message('click on item ' + command);
      // commandType:0本地选择，1终端扫描，2远程采集
      if (command.commandType == 0) {
        // 此功能只能在桌面端环境中使用，浏览器不支持读取图片文件在磁盘上的绝对路径（c:\xxxxx 这种格式的路径）
        if (!this.isElectron) {
          // 请在桌面端操作
          this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
          return
        }
        this.localSelectionImagesFlag = true
        console.log('本地选择图片');
      } else if (command.commandType == 1) {
        this.imageCollectionFlag = true
        console.log('终端扫描');
      } else if (command.commandType == 2) {
        console.log('远程采集');
        this.remoteCollectionFlag = true
      }
    },
    // 读NFC卡
    personnelinfoReadnfc() {
      this.readnfcLoading = true
      this.$nextTick(async () => {
        personnelinfoReadnfc().then((res) => {
          if (res.code === 200) {
            this.form.nfcCode = res.data
          }
        }).catch(err => {
          this.form.nfcCode = ""
          this.$store.commit('setNfcCode', "")
        }).finally(() => {
          this.readnfcLoading = false
        })

      });
    },
    // 读NFC卡
    readnfc() {
      console.log('读NFC卡');
      this.personnelinfoReadnfc()
    },
    handelTabsClick(obj) {
      console.log(obj);
      this.tabsIndex = obj.index * 1
    },
    /**
     * @description  获取部门人员树
     * @param :
     **/
    getdepartmenttree() {
      this.$nextTick(async () => {
        getdepartmenttree({IncludePersonInfo: false}).then((res) => {
          if (res.code === 200) {
            // 把最后一级children是空的设置成null
            this.orgInfo = filterLastTreeData(res.data.rootDepartments)
            var tempObj = {
              id: -1,
              name: this.i18n.t('default'),
              parentId: -1
            }
            this.orgInfo.push(tempObj)
            this.form.zzid = getParentsById(this.orgInfo, this.form.zzid)
          }
        }).catch(err => {

        }).finally(() => {

        })

      });
    },
    // 重置证件号码和卡号vuex的值
    resetStoreState() {
      // 清空store内的人员数据
      this.$store.commit('resetBiodataInfos')
      this.$store.commit('setIdCard', "")
      this.$store.commit('setNfcCode', "")
      this.$store.commit('setImage', "")
      this.$store.commit('setName', "")
      this.$store.commit('setSex', 0)
      this.biodataInfos = this.biodataInfos = this.$store.state.biodataInfos
    },
    // 更新父页面的数据
    updateParentData() {
      if (this.handleEditOrAddType !== 'view') {
        this.$parent.getdepartmenttree()
        this.$parent.onSearch()
      }
      this.$emit("update:editOrAddFlag", false);
    },
    /**
     * @description  关闭弹窗事件
     * @return not
     * @author xiongyi 2022-06-29 16:48:08
     **/
    handleCloseDialog() {
      this.$store.commit('setisAddPeoplePage', false)
      // 更新父页面的数据
      this.updateParentData()
      // 重置vuex证件号码、姓名、照片、性别、NFC卡号
      this.resetStoreState()
    },
    // 修改人员信息
    personnelinfoUpdate(params) {
      this.saveLoading = true
      personnelinfoUpdate(params).then((res) => {
        if (res.code === 200) {
          // 重置vuex证件号码、姓名、照片、性别、NFC卡号
          this.resetStoreState()
          // 修改成功
          this.W.$tips("success", this.i18n.t('Modified successfully!'));
          // 更新父页面的数据
          this.updateParentData()
        }
      }).catch().finally(() => {
        this.saveLoading = false
      })
    },
    // 添加人员
    personnelinfoCreate(params) {
      console.log('添加参数', params);
      personnelinfoCreate(params).then((res) => {
        if (res.code === 200) {
          // 添加成功
          this.W.$tips("success", this.i18n.t('Add successfully!'));
          // 重置vuex证件号码、姓名、照片、性别、NFC卡号
          this.resetStoreState()
          if (this.continueAddFlag) {
            this.continueAdding()
          } else {
            // 更新父页面的数据
            this.updateParentData()
          }
        }
      }).catch().finally(() => {
        this.saveLoading = false
      })
    },
    //继续添加时，重置弹窗数据
    continueAdding() {
      // tabs选项卡切换到第一个
      this.activeName = '0'
      // 清空基本信息tab页参数输入表单
      this.$refs.ruleForm.resetFields()
      this.form.password = null
      this.form.qrTime=""
    },
    // 获取弹窗上5个tab页的数据
    getParams() {
      console.log('处理前的参数', this.form);
      var params = JSON.parse(JSON.stringify(this.form))
      params.departmentInfoId = this.form.zzid[this.form.zzid.length - 1]
      delete params.zzid
      delete params.kh
      params.imagePath = ""
      // 组织ID
      if (params.departmentInfoId == -1) {
        params.departmentInfoId = null
      }
      // 考勤组ID
      if (!params.attendanceGroupId) {
        params.attendanceGroupId = null
      }
      params.biodataInfos = JSON.parse(JSON.stringify(this.$store.state.biodataInfos))
      delete params.biodataInfos.QRCode
      for (var item in params.biodataInfos) {
        // var base64Result=null
        if (params.biodataInfos[item].length) {
          var bio = params.biodataInfos[item][0]
          if (this.handleEditOrAddType == 'edit') {
            if (bio.fileInfo !== null) {
              var fileInfo = bio.fileInfo
              var suffix = fileInfo.substring(fileInfo.lastIndexOf('.') + 1)
              // 图片格式是jp2的时候，fileInfo需要从saveBase64Pic字段读取，saveBase64Pic的base64数据是无损的，showBase64Pic是有损的，只用于界面上显示
              if (suffix == 'jp2') {
                bio.fileInfo = bio.saveBase64Pic
              } else {
                bio.fileInfo = bio.showBase64Pic
              }
            } else {
              //通过摄像头等设备采集的图像，fileInfo没有值，直接从showBase64Pic取值
              bio.fileInfo = bio.showBase64Pic
            }
          } else {
            // 新增时
            if (bio.fileInfo === null) {
              bio.fileInfo = bio.showBase64Pic
            } else {
              var fileInfo = bio.fileInfo
              var suffix = fileInfo.substring(fileInfo.lastIndexOf('.') + 1)
              if (suffix == 'jp2') {
                bio.fileInfo = bio.saveBase64Pic
              } else {
                bio.fileInfo = bio.showBase64Pic
              }
            }
          }
          delete bio.saveBase64Pic
          delete bio.showBase64Pic
        }
      }

      // 访问码
      if(!checkIsEmpty(params.qrCode)){
        params.qrCode=null
      }
      // 二维码有效次数
      if(!checkIsEmpty(params.qrCodeValidTimes)){
        params.qrCodeValidTimes=null
      }
      // 二维码有效期
      if (params.qrTime) {
        params.qrCodeValidTime0 = params.qrTime[0]
        params.qrCodeValidTime1 = params.qrTime[1]
      } else {
        params.qrCodeValidTime0 = null
        params.qrCodeValidTime1 = null
      }

      delete params.qrTime

      // 二维码是否加密
      if (params.qrCodeIsEncryption) {
        params.qrCodeIsEncryption = true
      } else {
        params.qrCodeIsEncryption = false
      }

      console.log('处理后的参数', params);
      // debugger
      return params
      // if (this.hand_left.length || this.hand_right.length || this.leftEyePic || this.rightEyePic || this.leftPalmPrint.length || this.rightPalmPrint.length) {
      //     params.biodataInfos = {}
      // }

      for (var i = 0; i <= 9; i++) {
        if (this['fingerprint' + i].length) {
          params.biodataInfos = {}
        }
      }

      // 人脸图片
      if (this.form.facePath) {
        params.biodataInfos = {
          face: [this.form.facePath]
        }
      } else {
        if ('biodataInfos' in params) {
          delete params.biodataInfos.face
        }
      }


      // 左眼
      if (this.leftEyePic) {
        params.biodataInfos.eye_left = [this.leftEyePic]
      } else {
        params.biodataInfos.eye_left = []
      }

      // 右眼
      if (this.rightEyePic) {
        params.biodataInfos.eye_right = [this.rightEyePic]
      } else {
        params.biodataInfos.eye_right = []
      }


      // 掌静脉
      // 左手
      if (this.hand_left.length) {
        console.log('左手', this.hand_left);
        params.biodataInfos.hand_left = ""
        params.biodataInfos.hand_left = this.hand_left
      } else {
        params.biodataInfos.hand_left = []
      }
      // 右手
      if (this.hand_right.length) {
        params.biodataInfos.hand_right = ""
        params.biodataInfos.hand_right = this.hand_right
      } else {
        params.biodataInfos.hand_right = []
      }

      // 掌纹
      // 左手
      if (this.leftPalmPrint.length) {
        params.biodataInfos["palmprint_left"] = ""
        console.log(1547, params);
        params.biodataInfos["palmprint_left"] = this.leftPalmPrint
      } else {
        params.biodataInfos["palmprint_left"] = []
      }
      // 右手
      if (this.rightPalmPrint.length) {
        params.biodataInfos.palmprint_right = ""
        params.biodataInfos.palmprint_right = this.rightPalmPrint
      } else {
        params.biodataInfos.palmprint_right = []
      }

      if (params.biodataInfos != undefined) {
        for (var i = 0; i <= 9; i++) {
          if (this['fingerprint' + i].length) {
            params.biodataInfos["fingerprint" + (i + 1)] = this['fingerprint' + i]
          } else {
            params.biodataInfos["fingerprint" + (i + 1)] = []
          }
        }
      }
      return params
    },

    async addOrEdit() {
      // 更新人员信息
      if (this.handleEditOrAddType == 'edit') {
        // 显示是否应用到设备弹窗
        this.deleteFlag = true
        this.applyType = 2
      }
      //增加人员
      else if (this.handleEditOrAddType == 'add') {
        var res = await this.getParams()
        console.log('增加人员', res);
        this.personnelinfoCreate(res)
      }

    },
    /**
     * @description  保存弹窗数据
     * @param  not
     * @return not
     * @author qiankui 2023-4-26 19:32:40
     **/
    async submitForm(continueFlag) {
      console.log(this.activeName);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true
          this.continueAddFlag = continueFlag
          this.addOrEdit()
        } else {

          // var fieldsPerTab = {
          //   first: ['field1'],
          //   second: ['field2'],
          //   third: ['field3'],
          //   fourth: ['field4']
          // };
          var fieldsPerTab = [
            {
              name:'name',//需要验证的字段名
              tabIndex:"0"//该字段对应的tab标签页下标
            },
            {
              name:'jobNumber',
              tabIndex:"0"
            },
            {
              name:'sex',
              tabIndex:"0"
            },
            {
              name:'zzid',
              tabIndex:"0"
            },
            {
              name:"qrTime",
              tabIndex:"5",
              desc:"访问码有效期"
            },
            {
              name:'qrCodeValidTimes',
              tabIndex:"5",
              desc:"访问码次数"
            },
            {
              name:'qrCode',
              tabIndex:"5",
              desc:"访问码"
            },
            {
              name:'qrCodeIsEncryption',
              tabIndex:"5",
              desc:"是否加密"
            },
          ]
          console.log('验证不通过');
          // 验证未通过，请检查数据填写是否正确
          this.W.$tips("warning",this.i18n.t('GenerateQRcodeTips3'));
          //某个TAB页如果有没有验证通过的表单，自动切换到对应的tab页
          var tabsIndex=-1
          var flag=false
          for (var i=0;i<fieldsPerTab.length;i++){
            if (!flag){
              this.$refs.ruleForm.validateField(fieldsPerTab[i].name, (errorMessage) => {
                if (errorMessage) {
                  tabsIndex=fieldsPerTab[i].tabIndex
                  this.activeName = tabsIndex
                  flag=true
                } else {

                }
              });
            }else{
              break
            }
          }
          return false;
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.zh-tip {
  position: relative;
  color: #727b8f;
  text-align: right;

  .tb-btn {
    color: #4264d0;
    text-decoration: underline;
    cursor: pointer;
  }
}

.dia-sc-btn {
  background-color: transparent;
  border: 1px dashed rgba(55, 101, 215, 0.5);
  color: rgba(55, 101, 215, 0.5);
}

.el-dialog-div {
  //height: 635px;
  //overflow-x: hidden;
  box-sizing: border-box;
}

.el-input, .el-select, .el-cascader {
  width: 250px !important;
}

.openCamera {
  color: #fff;
  text-align: center;
  position: absolute;
  z-index: 10;

  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}

.eyePic {
  background: #f6f7fb;
  width: 150px;
  height: 150px
}

.eyePic.active {
  border: 1px dotted #3765d7;
}

#videoHM, #videoZJM, #videoJBXX {
  width: 100%;
  height: 300px;
  background: #000
}

#videoJBXX {
  width: 150px;
  height: 200px;
}

#outputHM, #outputZJM, #outputJBXX {
  position: absolute;
  left: -99999px;
  top: -999999px;
}

.vhCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

::v-deep .el-dialog__body:not(.preview .el-dialog__body) {
  overflow-y: hidden;
}

.preview {
  //text-align: center;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.zjm .avatar-uploader {
  display: inline-block;
  margin-left: 5px;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

/*.zjm .avatar{*/
/*width: 100px;*/
/*height: 100px;*/
/*display: inline-block;*/
/*}*/
.el-form-item__error {
  /*font-size: 12px;*/
}

.nfcView {
  margin-bottom: 10px !important;
}

.el-textarea {
  height: auto;
}

.hide .el-upload--picture-card {
  display: none;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.picTool {
  display: none;
  width: 180px;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  z-index: 6;
  /*left: 10px;*/
  color: #fff
}

.picView {
  position: relative;
  /*border: 1px solid red;*/
  width: 180px;
  height: 240px
}

.elImage {
  width: 180px;
  height: 240px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  z-index: 5
}

.picView:hover .picTool {
  display: inline-block;
}

.picToolView {
  margin-top: 120px;
  font-size: 20px;
  text-align: center
}

.toolIcon {
  cursor: pointer;
  margin-right: 25px;
}

.el-col-5 {
  width: 20%;
}

.selectFileView {
  border-radius: 4px;
  width: 180px;
  height: 240px;
  border: 1px solid #3a83da;
  text-align: center;
  padding-top: 100px;
  color: #3a83da;
  display: inline-block;
  position: relative;
  left: 10px;
  top: 0;
  z-index: 1;
  overflow: hidden;
}

.picClipper {
  font-size: 20px
}

.icon.iconfont-KUI.icon-duka1 {
  font-size: 25px;
  color: #3765d7;
}
.QRView .picView{
  width: 200px;
  height: 200px;
  border: 0px solid red;
}
.QRView .picView .elImage{
  width: 100%;
  height: 100%;
}
.QRView .picView .picTool{
  width: 100%;
  height: 100%;
}
.QRView .picView .picTool .picToolView{
  margin-top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

